<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 890px;
        height: 290px;
        background-color: yellow;
        margin: 0 auto;
        overflow: auto;
    }
    .info:hover div{
        background-color: #219cea;
    }
    .info:hover .price{
        color: white;
    }
    .info:hover .date{
        color: white;
    }
    .info:hover .category{
        color: #219cea;
        background-image: url(./溢出icon.png);
        background-repeat:no-repeat ;
        background-position: right bottom;
    }
    .info{
        width:162px;
        height:112px;
        border: 1px solid #808080;
        font-size: 12px;
        float: left;
        margin-right: 48px;
        margin-bottom: 20px;
    }
    .info div{
        height: 84px;
        background-color: #cccccc;
    }
    .info .price{
        line-height: 63px;
        height: 63px;
        padding-left: 21px;
        color: #b5b5b5;
    }
    .info .date{
        padding-left: 21px;
        color: #b5b5b5;
    }
    .info .category{
        background-color: white;
        height: 28px;
        line-height: 28px;
        color: black;
        text-align: center;
        font-size: 12px;

    }
</style>
</head>
<body>
    <div id="box">
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>

        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>

        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">$100.00园</p>
                <p class="date">有效期至:11111</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
    </div>
</body>
</html>